<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Maxiclear</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav_list li {
            padding: 0 20px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header style="height: 50px;line-height: 50px;background-color: #ccc;">
                <ul class="nav_list">
                    <li>
                        <router-link to='/'>网站首页</router-link>
                    </li>
                    <li>
                        <router-link to='/aboutUs'>
                            <about_dropdown></about_dropdown>
                        </router-link>
                    </li>
                    <li>
                        <router-link to='/product_center'>产品中心</router-link>
                    </li>
                    <li>
                        <router-link to='/yanfa_center'>
                            <yanfa_dropdown></yanfa_dropdown>
                        </router-link>
                    </li>
                    <li>
                        <router-link to='/texiao'>
                            <texiao_dropdown></texiao_dropdown>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/zixun">资讯中心</router-link>
                    </li>
                    <li>
                        <router-link to='/contact'>联系我们</router-link>
                    </li>
                </ul>

            </el-header>
            <el-main style="min-height: 400px;">
                <router-view></router-view>
            </el-main>
            <el-footer style="height: 150px;line-height: 150px;background-color: #ccc;">Footer</el-footer>
        </el-container>
    </div>
    <!-- 产品中心模板 -->
    <template id="procudt_router">
        <div>
            <el-container>
                <el-aside
                    style="width: 250px;min-height:400px;background-color: #ccc;line-height: 40px;text-align: center;">
                    <ul>
                        <li>
                            <router-link to='/product_center/product/外用药'>外用药</router-link>
                        </li>
                        <li>
                            <router-link to='/product_center/product/妇科用药'>妇科用药</router-link>
                        </li>
                        <li>
                            <router-link to='/product_center/product/小儿用药'>小儿用药</router-link>
                        </li>
                        <li>
                            <router-link to='/product_center/product/感冒用药'>感冒用药</router-link>
                        </li>
                    </ul>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </div>
    </template>


    <!-- 特效药品模块 -->
    <template id="sp_router">
        <el-container>
            <el-aside
                style="width: 250px;min-height:400px;background-color: #ccc;line-height: 40px;text-align: center;">
                <ul>
                    <li>
                        <router-link to='/texiao/sp/特效药原理'>特效药原理</router-link>
                    </li>
                    <li>
                        <router-link to='/texiao/sp/特效药受众对象'>特效药受众对象</router-link>
                    </li>
                    <li>
                        <router-link to='/texiao/sp/特效药常见问题'>特效药常见问题</router-link>
                    </li>
                </ul>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </template>

    <!-- 关于我们模块 -->
    <template id="about_router">
        <el-container>
            <el-aside
                style="width: 250px;min-height:400px;background-color: #ccc;line-height: 40px;text-align: center;">
                <ul>
                    <li>
                        <router-link to='/aboutUs/about/企业理念'>企业理念</router-link>
                    </li>
                    <li>
                        <router-link to='/aboutUs/about/愿景使命'>愿景使命</router-link>
                    </li>
                    <li>
                        <router-link to='/aboutUs/about/发展规划'>发展规划</router-link>
                    </li>
                </ul>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </template>

    <!-- 研发中心模块 -->
    <template id="yanfa_router">
        <el-container>
            <el-aside
                style="width: 250px;min-height:400px;background-color: #ccc;line-height: 40px;text-align: center;">
                <ul>
                    <li>
                        <router-link to='/yanfa_center/yanfa/研发团队'>研发团队</router-link>
                    </li>
                    <li>
                        <router-link to='/yanfa_center/yanfa/技术力量'>技术力量</router-link>
                    </li>
                    <li>
                        <router-link to='/yanfa_center/yanfa/研发展望'>研发展望</router-link>
                    </li>
                </ul>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </template>
</body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script src="./about.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    Vue.component('procudt_router', {
        template: '#procudt_router'
    });
    Vue.component('sp_router', {
        template: '#sp_router'
    })
    Vue.component('about_router', {
        template: '#about_router'
    })
    Vue.component("yanfa_router", {
        template: '#yanfa_router'
    })
    // 1 定义路由模板
    const index = {
        template: "<p>网站首页</p>"
    };
    const aboutUs = {
        template: "<about_router>关于我们</about_router>"
    };
    const about_router = {
        template: "<p>{{$route.params.type}}</p>"
    }
    const product_center = {
        template: "<procudt_router></procudt_router>"
    };
    // 产品中心二级路由组件
    const procudt_router = {
        template: '<p>{{$route.params.type}}</p>'
    }
    const yanfa_center = {
        template: "<yanfa_router></yanfa_router>"
    };
    // 研发中心二级路由
    const yanfa_router = {
        template: "<p>{{$route.params.type}}</p>"
    }

    const texiao = {
        template: "<sp_router></sp_router>"
    };
    const sp_router = {
        template: "<p>{{$route.params.type}}</p>"
    }
    const zixun = {
        template: "<p>资讯中心</p>"
    };
    const contact = {
        template: "<p>联系我们</p>"
    };

    // 2 定义路由
    const routes = [{
        path: "/",
        name: 'index',
        component: index
    }, {
        path: '/aboutUs/',
        name: 'aboutUs',
        component: aboutUs,
        redirect: "/aboutUs/about/企业理念",
        children: [{
            path: 'about/:type',
            name: 'about_router',
            component: about_router
        }]
    }, {
        path: '/product_center',
        name: 'product_center',
        component: product_center,
        redirect: '/product_center/product/外用药',
        // 二级路由
        children: [{
            path: 'product/:type',
            name: 'procudt_router',
            component: procudt_router
        }]
    }, {
        path: '/yanfa_center',
        name: 'yanfa_center',
        component: yanfa_center,
        redirect: '/yanfa_center/yanfa/研发团队',
        children: [{ //研发中心二级路由
            path: 'yanfa/:type',
            name: 'yanfa_router',
            component: yanfa_router
        }]
    }, {
        path: '/texiao',
        name: 'texiao',
        component: texiao,
        redirect: '/texiao/sp/特效药原理',
        // 特效药品二级路由
        children: [{
            path: 'sp/:type',
            name: 'sp_router',
            component: sp_router
        }]
    }, {
        path: '/zixun',
        name: 'zixun',
        component: zixun
    }, {
        path: "/contact",
        name: 'contact',
        component: contact
    }]

    // 3 定义路由实例
    const router = new VueRouter({
        routes
    })

    // 4 创建实例，注入路由
    new Vue({
        el: "#app",
        router
    })
</script>

</html>